<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        h1 {
            width: 200px;
            text-align: center;
            margin: 20px auto;
        }
        
        table {
            width: 800px;
            margin: 0 auto;
            border-collapse: collapse;
        }
        
        th,
        td {
            border: 1px solid #000;
        }
        
        form {
            width: 800px;
            margin: 20px auto;
        }
        
        .star {
            background-image: url(star.png);
            width: 32px;
            height: 32px;
            float: left;
        }
    </style>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script>
        $(function() {
            var foods = [];
            var tbody = $("tbody");
            var changeStar = function(stars, num) {
                for (var i = 0; i < num; i++) {
                    $(stars[i]).css("background-position", "0 -32px");
                }
                for (var i = num; i < stars.length; i++) {
                    $(stars[i]).css("background-position", "0 0");
                }
            }
            var showlist = function() {
                tbody.empty();
                for (var i = 0; i < foods.length; i++) {
                    var tr = "<tr index=" + i + "><td>" + foods[i].name + "</td><td>" + foods[i].year + "</td><td>" + "<div class ='star' index=1></div><div class ='star' index=2></div><div class ='star'  index=3></div><div class ='star' index=4></div><div class ='star' index=5></div>" +
                        "</td><td>" + "<button class='btn-del'>删除</button>" + "</td></tr>";

                    var jTr = $(tr);
                    var stars = jTr.find(".star");

                    stars.on("mouseenter", function(e) {
                        var star = $(this);
                        var stars = $(this).parent().find(".star");
                        var index = star.attr("index");
                        changeStar(stars, index);
                    });
                    stars.on("mouseleave", function(e) {
                        var star = $(this);
                        var index = star.parents("tr").attr("index");

                        var star = $(this);
                        var stars = $(this).parent().find(".star");
                        changeStar(stars, foods[index].star);
                    });
                    stars.on("click", function(e) {
                        var star = $(this);
                        var index = star.parents("tr").attr("index");

                        var star = $(this);
                        var stars = $(this).parent().find(".star");
                        var starIndex = star.attr("index");

                        $.ajax({
                            url: "/changeStar",
                            method: "get",
                            data: {
                                index: index,
                                starIndex: starIndex
                            },
                            success: function(data) {
                                foods[index].star = starIndex;
                                changeStar(stars, foods[index].star);
                            }
                        })
                    })
                    changeStar(stars, foods[i].star)
                    tbody.append(jTr);
                }
                var btnDels = tbody.find(".btn-del");
                btnDels.on("click", function(e) {
                    var btnDel = $(this);
                    var index = btnDel.parents("tr").attr("index");

                    $.ajax({
                        url: "/del",
                        method: "get",
                        data: {
                            index: index
                        },
                        success: function(data) {
                            console.log(data);
                            foods = data;
                            showlist();
                        }
                    })
                })
            };
            var getfoodsData = function() {
                $.ajax({
                    url: "/getfoodsData",
                    method: "get",
                    success: function(data) {
                        movies = data;
                        showlist();
                    }
                })
            };

            getfoosData();

            var btnAdd = $(".btn-add");
            btnAdd.on("click", function(e) {
                e.preventDefault();
                var newfoods = {
                    name: $(".foods-name").val(),
                    year: $(".foods-year").val(),
                    star: $(".foods-star").val(),
                };

                $.ajax({
                    url: "/add",
                    method: "get",
                    data: {
                        newfoods: newfoods
                    },
                    success: function(data) {
                        foods = data;
                        showlist();
                    }
                })
            })

            var btnNext = $(".btn-next");
            btnNext.on("click", function(e) {
                $.ajax({
                    url: "/next",
                    method: "get",
                    success: function(data) {

                        foods = data;
                        showlist();
                    }
                })

            });


            var btnPri = $(".btn-pri");
            btnPri.on("click", function(e) {
                $.ajax({
                    url: "/pri",
                    method: "get",
                    success: function(data) {

                        foods = data;
                        showlist();
                    }
                })

            });

        })
    </script>
    <h1>我的食物点评列表</h1>
    <table>
        <thead>
            <th>食物名字</th>
            <th>店家年份</th>
            <th>星级</th>
            <th>操作</th>
        </thead>
        <tbody></tbody>
    </table>
    <div>
        <button class="btn-pri">上一页</button>
        <button class="btn-next">下一页</button>
    </div>
    <form>
        <label for="foods-name">电影名字</lable><input type="text" name="foods-name" class="foods-name"/>
        <label for="foods-year">电影年份</lable><input type="text" name="foods-year" class="foods-year"/>
        <label for="foods-star">电影星级</lable><input type="text" name="foods-star" class="foods-star"/>
        <button class="btn-add">增加</button>
    </form>
</body>
</html>